<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>拦截器</title>
</head>

<body>
    <div id="app">
        <h1>姓名：{{user.name}}</h1>
        <h1>年龄：{{user.age}}</h1>
        <button @click="fnget">Get方法</button>
    </div>
</body>

</html>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    //添加一个请求拦截器
    axios.interceptors.request.use(
        function (config) {
            // 在请求发送之前做一些事
            console.log("请求马上要发送了：" + config.url);
            config.headers.mytoken = "hello";
            return config;
        },
        function (error) {
            // 当出现请求错误是做一些事
            console.log("出现错误了：" + error);
        }
    );
    //添加一个响应拦截器
    axios.interceptors.response.use(function (response) {
        // 对返回的数据进行一些处理
        console.log("将要返回请求的数据了！" + response.data.name);
        var data = response.data;
        return data;
    }, function (error) {
        //对返回的错误进行一些处理
        console.log("出现错误了：" + error);
    });
    var app = new Vue({
        el: '#app',
        data: {
            user: {},
            name: ""
        },
        methods: {
            fnget() {
                axios.get("./test.txt", {
                    params: {
                        id: 1001
                    },
                    // 请求头中添加参数
                    headers: {
                        token: "xiaocang"
                    }
                }).then(res => {
                    this.user = res;
                }).catch(err => {
                    console.log(err)
                });
            }
        }
    })
</script>